<script setup>
  import 'animate.css'
</script>

<template>
  <suspense>
    <div>
      <div class="link">
        <!-- <router-link :to="{name:'home'}">home</router-link>
        <router-link :to="{name:'about'}">about</router-link>
        <router-link :to="{name:'article'}">article</router-link> -->
      </div>
      <div class="router-view">
        <router-view #default="{Component}">
            <!-- 动态渲染路由 -->
            <span v-for="route of $router.getRoutes()" :key="route.name">
              <router-link :to="{name:route.name}" v-if="route.meta?.title">{{route.meta.title}}</router-link>
            </span>
            <component :is="Component" />
        </router-view>
      </div>
    </div>
  </suspense>
</template>

<style lang="scss" scoped>
  a{
    padding: 10px;
    background-color: #16a085;
    color: #fff;
    margin-right: 10px;
  }

  span{
    display: inline-block;
    margin-bottom: 20px;
  }
  .router-view{
    margin-top: 20px;
    color: #666;
  }
</style>
